<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-03-17 11:04:13
 * @LastEditors: younghxp
 * @LastEditTime: 2022-04-01 14:04:28
-->
<template>
  <div class="mainCon">
    <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
      <el-form :inline="true" :model="filterField" ref="searchConditions">
        <el-col :lg="8" :xl="6">
          <el-form-item label="上传时间" class="row-padding-bottom">
            <timeSelection
              :startTime="filterField.startDate"
              :endTime="filterField.endDate"
              @getStartTimeValue="getStartTimeValue"
              @getEndTimeValue="getEndTimeValue"
            ></timeSelection>
          </el-form-item>
        </el-col>
        <el-col v-if="uploadType === 'SMALL_PROJECT_ATT'" :lg="8" :xl="6">
          <el-form-item label="考勤日期" class="row-padding-bottom">
            <el-date-picker
              class="optionWidth"
              v-model="filterField.queryDate"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-if="uploadType === 'SMALL_PROJECT_SALARY'" :lg="8" :xl="6">
          <el-form-item label="发薪月份" class="row-padding-bottom">
            <el-date-picker
              class="optionWidth"
              v-model="filterField.queryDate"
              type="month"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-form-item label="">
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchList"
            class="searchBtn"
          >
            <span>搜索</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="spacing"></div>
    <div
      ref="tableBox"
      :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
    >
      <div v-if="showHistory" style="margin-bottom: 24px">
        <el-link type="primary" @click="goHistory" v-sdc class="fontBtn"
          >历史记录</el-link
        >
        <span style="color: #999" v-if="loginType === 'XM'">|</span>
        <el-link
          v-if="loginType === 'XM' && isShowDownload"
          type="primary"
          @click="downTemplate"
          v-sdc
          class="fontBtn"
          >下载模板</el-link
        >
        <span style="color: #999" v-if="loginType === 'XM' && isShowDownload"
          >|</span
        >
        <el-link
          v-if="loginType === 'XM'"
          type="primary"
          @click="showTaskProp = true"
          v-sdc
          class="fontBtn"
          >上传附件</el-link
        >
      </div>
      <el-table
        @sort-change="sortChange"
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        :row-key="recordId"
        ref="multipleTable"
        v-loading="loading"
      >
        <el-table-column
          v-if="uploadType === 'SMALL_PROJECT_ATT'"
          prop="remark"
          sortable="custom"
          label="考勤日期"
          align="center"
          :formatter="formatTd"
          min-width="180"
        ></el-table-column>
        <el-table-column
          v-if="uploadType === 'SMALL_PROJECT_SALARY'"
          prop="remark"
          sortable="custom"
          label="发薪月份"
          align="center"
          :formatter="formatTd"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          sortable="custom"
          align="center"
          :formatter="formatTd"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="name" label="附件名称" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.name"
              columnName="name"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column label="格式" align="center" min-width="180">
          <template slot-scope="scope">
            <span>{{ getFileType(scope.row.name) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210px">
          <template slot-scope="scope">
            <el-link type="primary" @click="download(scope.row)"
              >下载附件</el-link
            >
            <el-link
              type="primary"
              v-if="!checkImg(scope.row)"
              @click="lookResult(scope.row.url)"
              >查看</el-link
            >
            <div class="inline-block previewBox">
              <el-link
                type="primary"
                v-if="checkImg(scope.row)"
                @click="checkLook(scope.row.url)"
                >查看</el-link
              >
            </div>
            <el-link
              type="primary"
              v-if="showHistory && loginType === 'XM'"
              @click="delConfirm(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关附件"></emptyTable>
        </div>
      </el-table>
      <el-image
        class="previewImg"
        style="width: 56px; height: 0px"
        :src="src"
        :preview-src-list="[src]"
        id="publicSignBox"
      ></el-image>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
        @getpageNo="getpageNo"
        @getpageSize="getpageSize"
      ></Pagination>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="delDialogVisible"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <span>请确认是否删除该附件？</span>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="delDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" class="save" @click="deleteItem()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <upload-file-dialog
      :projectId="projectId"
      :uploadType="uploadType"
      :showTaskProp="showTaskProp"
      @handleBack="updateList"
    />
  </div>
</template>

<script>
import common from '../../kits/common'
import uploadFileDialog from './uploadFileDialog.vue'
export default {
  name: 'attachRecordTable',
  components: {
    uploadFileDialog,
  },
  props: {
    showHistory: {
      type: Boolean, //是否展示历史记录按钮
      default: false,
    },
    uploadType: {
      type: String,
      default: 'SMALL_PROJECT_EMPLOYEE', //花名册:SMALL_PROJECT_EMPLOYEE; 考勤:SMALL_PROJECT_ATT; 工资:SMALL_PROJECT_SALARY
    },
    loginType: {
      type: String,
      default: '', // XM能上传和下载附件
    },
    projectId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tableData: [],
      showTaskProp: false, //上传附件弹窗
      requestUrl: 'api-e/cs/employee/expand/selectMiniProjectFile',
      filterField: {
        projectId: '',
        type: 'SMALL_PROJECT_EMPLOYEE', //花名册:SMALL_PROJECT_EMPLOYEE; 考勤:SMALL_PROJECT_ATT; 工资:SMALL_PROJECT_SALARY
        queryDate: '', //考勤:yyyy-MM-dd;工资:yyyy-MM
        startDate: '', //花名册yyyy-MM-dd
        endDate: '',
      },
      pageNo: 1,
      pageSize: 20,
      loading: false,
      isShow: false,
      src: '',
      delDialogVisible: false,
      id: '',
      isShowDownload: false,
      attachDetail: {},
    }
  },
  created() {
    this.filterField.projectId = this.projectId
    this.filterField.type = this.uploadType
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
    this.showHistory && this.getTemplate()
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    lookResult(url) {
      window.open(url)
    },
    checkLook(url) {
      this.src = url
      setTimeout(() => {
        $('#publicSignBox').click()
      }, 300)
    },
    download(item) {
      // window.open(item.url);
      window.open(
        common.commonApi +
          'api-f/files/downloadtolocal?url=' +
          item.path +
          '&fileName=' +
          item.name
      )
    },
    getFileType(name) {
      if (name) {
        const fileName = name.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
        const fileNameLen = name.length // 取到文件名长度
        const fileType = name.substring(fileName + 1, fileNameLen) // 截
        return '.' + fileType
      }
    },
    checkImg(item) {
      var str = item.originalName || this.getName(item.url)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
        return false
      }
    },
    // 二次确认
    delConfirm(id) {
      this.id = id
      this.delDialogVisible = true
    },
    deleteItem() {
      this.axios({
        method: 'post',
        url: '/api-e/cs/employee/expand/deleteMiniProjectFile',
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          this.delDialogVisible = false
          if (!res.data.hasError) {
            this.$message.success('删除成功')
            this.searchList()
          } else {
            this.$message.success('删除失败')
          }
        })
        .catch((error) => {
          this.delDialogVisible = false
          this.$message.success('删除失败')
        })
    },
    goHistory() {
      this.$emit('goHistory')
    },
    getTemplate() {
      this.axios({
        method: 'post',
        url: '/api-f/template/download',
        data: {
          typeId:
            this.uploadType === 'SMALL_PROJECT_ATT'
              ? '05'
              : this.uploadType === 'SMALL_PROJECT_SALARY'
              ? '06'
              : '04',
          projectId: this.projectId,
        },
      }).then((response) => {
        if (!response.data.hasError) {
          this.isShowDownload = true
          this.attachDetail = response.data.result
        }
      })
    },
    downTemplate() {
      window.open(
        common.commonApi +
          'api-f/files/downloadtolocal?url=' +
          this.attachDetail.path +
          '&fileName=' +
          this.attachDetail.name
      )
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDate = val
      } else {
        this.filterField.startDate = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDate = val
      } else {
        this.filterField.endDate = ''
      }
    },
    updateList() {
      this.showTaskProp = false
      this.searchList()
    },
    searchList() {
      this.pageNo = 1
      this.pageSize = 20
      this.$refs.pagination.getTableListData()
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
  },
}
</script>

<style lang="less" scoped>
.previewBox {
  display: inline-block;
  position: relative;
  .previewImg {
    position: absolute;
    top: 25px;
    left: 0;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 1;
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
}
</style>
